import React from 'react'
import {Text, View} from "react-native";
import SegmentedControl from "@ant-design/react-native/es/segmented-control/segmented.android";
import WhiteSpace from "@ant-design/react-native/es/white-space/index";
import ListView from "@ant-design/react-native/es/list-view/index";
import Styles from "../common/styles";
import Tag from "@ant-design/react-native/es/tag/index";
import Card from "@ant-design/react-native/es/card/index";
import {Actions} from 'react-native-router-flux'

const orderData = [
  {
    userName: '哈哈',
    headImg: 'https://gw.alipayobjects.com/zos/rmsportal/MRhHctKOineMbKAZslML.jpg',
    phone: '17868803265',
    carName: '重型吊车',
    projectTime: 3,
    number: 3,
    projectPrice: 3000,
    enterTime: '2019:08:08 16:40',
    address: '陕西省西安市',
    count: 5,
    status: '已拒绝'
  },
  {
    userName: '哈哈',
    headImg: 'https://gw.alipayobjects.com/zos/rmsportal/MRhHctKOineMbKAZslML.jpg',
    phone: '17868803265',
    carName: '重型吊车',
    projectTime: 3,
    number: 3,
    projectPrice: 3000,
    enterTime: '2019:08:08 16:40',
    address: '陕西省西安市',
    count: 5,
    status: '待确定'
  },
  {
    userName: '哈哈',
    headImg: 'https://gw.alipayobjects.com/zos/rmsportal/MRhHctKOineMbKAZslML.jpg',
    phone: '17868803265',
    carName: '重型吊车',
    projectTime: 3,
    number: 3,
    projectPrice: 3000,
    enterTime: '2019:08:08 16:40',
    address: '陕西省西安市',
    count: 5,
    status: '待结算'
  },
  {
    userName: '哈哈',
    headImg: 'https://gw.alipayobjects.com/zos/rmsportal/MRhHctKOineMbKAZslML.jpg',
    phone: '17868803265',
    carName: '重型吊车',
    projectTime: 3,
    number: 3,
    projectPrice: 3000,
    enterTime: '2019:08:08 16:40',
    address: '陕西省西安市',
    count: 5,
    status: '进行中'
  },
  {
    userName: '哈哈',
    headImg: 'https://gw.alipayobjects.com/zos/rmsportal/MRhHctKOineMbKAZslML.jpg',
    phone: '17868803265',
    carName: '重型吊车',
    projectTime: 3,
    number: 3,
    projectPrice: 3000,
    enterTime: '2019:08:08 16:40',
    address: '陕西省西安市',
    count: 5,
    status: '进行中'
  }
]

export default class OrderList extends React.Component {

  onChange = e => {
    console.log(`selectedIndex:${e.nativeEvent.selectedSegmentIndex}`);
  };
  onValueChange = value => {
    console.log(value);
  };
  onFetch = async (
    page = 1,
    startFetch,
    abortFetch
  ) => {
    try {
      let pageLimit = 30;
      startFetch(orderData, pageLimit);
    } catch (err) {
      abortFetch(); //manually stop the refresh or pagination if it encounters network error
    }
  };
  toDetail = status => {
    if (status === '进行中') {
      Actions.grabOrder();
    }
    if (status === '待确定') {
      Actions.confirmOrder();
    }
    if (status === '待结算') {
      Actions.checkoutOrder();
    }
  }
  renderItem = (data) => {
    const statusStyle = data.status === '已拒绝' ? 'red' : ''
    return <View><Card>
      <Card.Header
        thumb={data.headImg}
        thumbStyle={{height: 20, width: 20, borderRadius: 10}}
        title={<Text style={Styles.defaultFontSize}>{data.userName}</Text>}
        extra={<Text style={Styles.defaultFontSize}>电话号码：{data.phone}</Text>}
      />
      <Card.Body>
        <View style={{flexDirection: 'column', paddingHorizontal: 15}}>

          <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
            <Text>{data.carName}</Text>
            <Text>需求数量：{data.number}台</Text>
          </View>
          <WhiteSpace size='xs'/>
          <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
            <Text>工期：{data.projectTime}天</Text>
            <Text>单价：{data.projectPrice}元/天/台</Text>
          </View>
          <WhiteSpace size='xs'/>
          <Text>进场时间：{data.enterTime}</Text>
          <WhiteSpace size='xs'/>
          <Text>施工地点：{data.address}</Text>
        </View>
      </Card.Body>
      <Card.Footer
        content={
          <View style={{
            borderTopWidth: 1, borderTopColor: '#ececec'
          }}>
            <WhiteSpace/>
            <View style={{flexDirection: 'row', justifyContent: 'space-between',}}>
              <Text>已有{data.count}人抢单</Text>

              <Tag small>
                <Text style={{color: statusStyle}}>
                  {data.status}
                </Text>
              </Tag>
              <Text style={Styles.defaultFontColor}
                    onPress={() => this.toDetail(data.status)}>查看详情</Text>
            </View>
          </View>
        }
      />
    </Card>
      <WhiteSpace size='lg'/>
    </View>
  }

  render() {
    return <View style={{margin: 20, marginTop:10}}>
      <SegmentedControl
        values={['进行中', '待确定', '待评价', '全部']}
        onChange={this.onChange}
        onValueChange={this.onValueChange}
      />
      <WhiteSpace size="lg"/>
      <ListView
        onFetch={this.onFetch}
        renderItem={this.renderItem}
        numColumns={1}
      />
    </View>
  }
}